<template>
  <div class="radio-rank">
    <div class="box" v-for="(item,index) of item"
         :key="index" @click="itemClick(index)">
      <div class="number">
        {{index+4}}
      </div>
      <div class="left">
        <img :src="item.picUrl" alt="">
      </div>
      <div class="right">
        <p class="right-top">{{item.name}}</p>
        <div class="right-bottom">
          <p class="font-left">播放：{{item.score}}</p>
          <p class="font-right">{{item.singer}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getRadioDetail} from "../../../network/radio";
  export default {
        name: "RadioRankStyle3",
        props:{
            item:{
                type:Array,
                default(){
                    return[]
                }
            }
        },
        data(){
            return{

            }
        },
        methods:{
            itemClick(index){
                console.log(this.item[index].id)
            }
        },
        created() {

        },
    }
</script>

<style scoped>
  .radio-rank{
    width: 100%;
  }

  .box{
    display: flex;
    justify-content:  flex-start ; /* 横向中间自动空间 */
    width: 100%;
    margin-bottom: 5px;
    position: relative;
  }

  .number{
    width: 40px;
    text-align: center;
    position: relative;
    transform: translateY(35%);
    font-size: 16px;
    font-weight: 600;
    color: lightgray;
  }

  .left{
    width: 60px;
  }

  .left img{
    border-radius: 8px;
    width: 60px;
    height: 60px;
  }

  .right{
    position: relative;
    width: 60%;
    left: 20px;
    top: 4px;
    font-size: 13px;
  }

  .right-top{
    position: absolute;
    left: 0;
    top: 4px;
  }

  .right-bottom{
    position: absolute;
    left: 0;
    /*bottom: 8px;*/
    top: 35px;
  }

  .right-bottom p{
    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

  .font-left{
    float: left;
  }

  .font-right{
    padding-left: 20px;
  }



</style>